<template>
  <section>
    <p v-if="isSaved">{{ value }}</p>
    <el-input
      v-else
      type="textarea"
      :rows="2"
      maxlength="200"
      show-word-limit
      v-model="desc"
      @input="handleInput"
    ></el-input>
    <div>
      <!-- <el-button type="text"
                 @click="handleEvent">{{isSaved?'编辑':'保存'}}</el-button>
      <el-button type="text"
                 v-show="!isSaved">取消</el-button> -->
    </div>
  </section>
</template>

<script>
export default {
  name: "Instructions",
  props: {
    value: ""
  },
  data() {
    return {
      desc: "",
      isSaved: false
    };
  },
  methods: {
    handleInput(value) {
      this.$emit("update:value", value);
    },
    handleEvent() {
      this.isSaved = !this.isSaved;
    }
  }
};
</script>

<style></style>
